<template>
  <!-- <div v-if="show"
    class="fixed flex w-screen h-screen justify-center items-center flex-col z-[99] overflow-hidden bg-white dark:bg-slate-900">
    <div class="custom-loader" :style="{ transform: 'rotate(165deg)' }"></div>
  </div> -->

  <div v-if="show" class="fixed inset-0 z-[9999] flex items-center justify-center" :style="backgroundStyle">
    <div class="custom-loader" :style="{ transform: 'rotate(165deg)' }"></div>
  </div>
</template>

<script setup>
const props = defineProps({
  show: {
    type: Boolean,
    default: true
  }
})

const gradients = [
  { from: '#00dfd8', to: '#007cf0' },
  // { from: '#ff0080', to: '#ff8c00' },
  { from: '#7928ca', to: '#ff0080' },
  { from: '#ff4d4d', to: '#f9cb28' },
  { from: '#00c6ff', to: '#0072ff' },
  { from: '#f7971e', to: '#ffd200' },
  { from: '#00c9ff', to: '#92fe9d' },
  { from: '#f953c6', to: '#b91d73' }
]
const currentIndex = ref(0)
let intervalId = null

const backgroundStyle = computed(() => ({
  background: `linear-gradient(135deg, ${gradients[currentIndex.value].from}, ${gradients[currentIndex.value].to})`,
  transition: 'background .5s ease'
}))

onMounted(() => {
  intervalId = setInterval(() => {
    currentIndex.value = (currentIndex.value + 1) % gradients.length
  }, 800)
})

onBeforeUnmount(() => {
  clearInterval(intervalId)
})
</script>

<style scoped>
@keyframes pulse {

  0%,
  100% {
    opacity: 0.2;
    transform: scale(0.8);
  }

  50% {
    opacity: 0.5;
    transform: scale(1.2);
  }
}

.animate-ping {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.custom-loader {
  position: relative;
  width: 3rem;
  height: 3rem;
}

.custom-loader::before,
.custom-loader::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 0.5em;
  height: 0.5em;
  border-radius: 0.25em;
  transform: translate(-50%, -50%);
}

.custom-loader::before {
  animation: loaderBefore 2s infinite;
}

.custom-loader::after {
  animation: loaderAfter 2s infinite;
}

@keyframes loaderBefore {
  0% {
    width: 0.5em;
    box-shadow:
      1em -0.5em rgba(225, 20, 98, 0.75),
      -1em 0.5em rgba(111, 202, 220, 0.75);
  }

  35% {
    width: 2.5em;
    box-shadow:
      0 -0.5em rgba(225, 20, 98, 0.75),
      0 0.5em rgba(111, 202, 220, 0.75);
  }

  70% {
    width: 0.5em;
    box-shadow:
      -1em -0.5em rgba(225, 20, 98, 0.75),
      1em 0.5em rgba(111, 202, 220, 0.75);
  }

  100% {
    box-shadow:
      1em -0.5em rgba(225, 20, 98, 0.75),
      -1em 0.5em rgba(111, 202, 220, 0.75);
  }
}

@keyframes loaderAfter {
  0% {
    height: 0.5em;
    box-shadow:
      0.5em 1em rgba(61, 184, 143, 0.75),
      -0.5em -1em rgba(233, 169, 32, 0.75);
  }

  35% {
    height: 2.5em;
    box-shadow:
      0.5em 0 rgba(61, 184, 143, 0.75),
      -0.5em 0 rgba(233, 169, 32, 0.75);
  }

  70% {
    height: 0.5em;
    box-shadow:
      0.5em -1em rgba(61, 184, 143, 0.75),
      -0.5em 1em rgba(233, 169, 32, 0.75);
  }

  100% {
    box-shadow:
      0.5em 1em rgba(61, 184, 143, 0.75),
      -0.5em -1em rgba(233, 169, 32, 0.75);
  }
}
</style>